<template>
  <div class="questions-choice-container">
    <el-card>
      <!-- 头部区域 -->
      <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
        <el-col
          ><span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          ></el-col
        >
        <el-col style="text-align: right"
          ><el-button
            type="success"
            class="el-icon-edit"
            size="small"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          ></el-col
        >
      </el-row>

      <!-- 搜索区域 -->
      <el-form ref="formRef" label-width="80px">
        <el-row :gutter="10">
          <!-- 学科选择框 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="queryInfo.subjectID"
                placeholder="请选择"
                @change="getCatalogOptions"
                clearable
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 二级目录选择框 -->
          <el-col :span="6">
            <el-form-item label="二级学科">
              <el-select v-model="queryInfo.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in catalogOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 标签选择框 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="queryInfo.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 关键字输入框 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="queryInfo.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- 试题类型选择框 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="queryInfo.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 难度选择框 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="queryInfo.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficultyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 方向选择框 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="queryInfo.direction" placeholder="请选择">
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 录入人选择框 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="queryInfo.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in creatorOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="queryInfo.remarks"></el-input>
            </el-form-item>
          </el-col>

          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="queryInfo.shortName"></el-input>
            </el-form-item>
          </el-col>

          <!-- 城市选择框 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="queryInfo.province"
                placeholder="请选择"
                style="width: 49%"
                @change="getCityOptions"
              >
                <el-option
                  v-for="item in provincesOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>

              <el-select
                v-model="queryInfo.city"
                placeholder="请选择"
                style="width: 49%; margin-left: 4px"
                clearable
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="text-align: right">
            <el-button @click="clean">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 标签页组件 -->
      <el-tabs v-model="queryInfo.chkState" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="拒绝" name="2"></el-tab-pane>
      </el-tabs>

      <!-- 提示框组件 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- table组件 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120px">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120px">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120px">
        </el-table-column>
        <el-table-column label="题型" width="120px">
          <template #default="{ row }">
            {{
              questionType.find((item) => item.value === +row.questionType)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template #default="{ row }">
            {{ parseTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="80px">
          <template #default="{ row }">
            {{
              difficulty.find((item) => item.value === +row.difficulty).label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120px">
        </el-table-column>
        <el-table-column prop="subject" label="审核状态" width="120px">
          <template #default="{ row }">
            {{ parseChkState(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150px">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120px">
        </el-table-column>
        <el-table-column label="发布状态" width="150px">
          <template #default="{ row }"> {{ parsePubState(row) }} </template>
        </el-table-column>
        <el-table-column
          prop="subject"
          label="操作"
          width="200px"
          fixed="right"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { simple as getSubjectsOptionsApi } from '@/api/hmmm/subjects.js'
import { simple as getCatalogOptionsApi } from '@/api/hmmm/directorys.js'
import { simple as getTagsOptionsApi } from '@/api/hmmm/tags.js'
import { simple as getCreatorOptionsApi } from '@/api/base/users.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice as getQuestionListApi } from '@/api/hmmm/questions.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: 'all'
      },
      // 学科选项
      subjectOptions: [],
      // 二级学科选项
      catalogOptions: [],
      // 标签选项
      tagsOptions: [],
      // 试题类型选项
      questionTypeOptions: questionType,
      // 难度选择框
      difficultyOptions: difficulty,
      // 方向选择框
      directionOptions: direction,
      // 录入人选择框
      creatorOptions: [],
      // 城市选择框
      provincesOptions: provinces(),
      // 城市下地区选择框
      cityOptions: [],
      // 分页组件的total
      total: 0,
      // 题库
      questionList: [],
      // 题型
      questionType,
      // 难度
      difficulty
    }
  },
  created () {
    this.getSubjectsOptions()
    this.getCreatorOptions()
    this.getQuestionList()
  },
  methods: {
    // 获取学科选项
    async getSubjectsOptions () {
      const { data } = await getSubjectsOptionsApi()
      // console.log(data)
      this.subjectOptions = data
    },
    // 获取二级学科目录
    async getCatalogOptions () {
      this.queryInfo.catalogID = ''
      const { data } = await getCatalogOptionsApi({ subjectID: this.queryInfo.subjectID })
      console.log(data)
      this.catalogOptions = data

      this.queryInfo.tags = ''
      const res = await getTagsOptionsApi({ subjectID: this.queryInfo.subjectID })
      // console.log(res)
      this.tagsOptions = res.data
    },
    // 获取录入人
    async getCreatorOptions () {
      const { data } = await getCreatorOptionsApi()
      // console.log(data)
      this.creatorOptions = data
    },
    // 获取城市下地区选项
    getCityOptions () {
      this.queryInfo.city = ''
      this.cityOptions = citys(this.queryInfo.province)
    },
    // 清除功能
    clean () {
      this.queryInfo = {
        page: 1,
        pagesize: 10,
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: '',
        chkState: ''
      }
    },
    // 查询功能
    search () {
      this.queryInfo.page = 1
      this.getQuestionList()
    },
    // 获取题库
    async getQuestionList () {
      const params = { ...this.queryInfo }
      if (params.chkState === 'all') params.chkState = null
      const { data } = await getQuestionListApi(params)
      console.log('页面创建时获取题库', data)
      this.questionList = data.items
      this.total = data.counts
    },
    // 点击标签页
    handleTabClick () {
      this.queryInfo.page = 1
      this.getQuestionList()
    },
    // 格式化时间
    parseTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式化审核状态
    parseChkState (value) {
      if (value === 0) return '待审核'
      if (value === 1) return '已审核'
      if (value === 2) return '已拒绝'
    },
    // 格式化发布状态
    parsePubState (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  }
}
</script>

<style scoped lang="scss">
.questions-choice-container {
  padding: 10px 10px;
}
</style>
